/* GitHub Stats Button Container - Fixed positioning */
#github-stats-button {
  display: flex;
  align-items: center;
  margin-right: 0;
  height: 40px;
  position: relative;
  isolation: isolate;
}

/* GitHub Stats Button Styling */
.github-stats-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 5px;
  height: 2.5rem !important; /* 40px - Exactly like the mode toggle */
  padding: 0 0.75rem !important;
  font-weight: 500;
  border: 2px solid #000;
  background-color: #d4b483; /* fun color from globals.css */
  color: #000 !important;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    opacity 0.2s ease; /* Only transition specific properties */
  font-family: "Shuttleblock", system-ui, -apple-system, sans-serif;
  vertical-align: middle !important;
  line-height: 1 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  /* Fine tune vertical alignment - try a slight adjustment */
  position: relative !important;
  top: 1px !important; /* Adjusted to move down slightly */
}

.github-stats-button:hover {
  opacity: 0.9;
}

.github-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-block;
}

.star-count {
  line-height: 1;
  font-size: 0.875rem;
  font-weight: 500;
  display: inline-block;
  color: #000 !important;
}

/* Ensure black text/icon in both light and dark themes */
html[data-theme="light"] .github-stats-button,
html[data-theme="dark"] .github-stats-button {
  color: #000 !important;
}

html[data-theme="light"] .github-stats-button .star-count,
html[data-theme="dark"] .github-stats-button .star-count {
  color: #000 !important;
}

html[data-theme="light"] .github-stats-button .github-icon,
html[data-theme="dark"] .github-stats-button .github-icon {
  color: #000 !important;
}

/* Simple Tooltip - No complex state management */
.github-stats-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.simple-tooltip {
  position: absolute;
  right: calc(100% + 4px); /* 4px sideOffset like the real tooltip */
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  pointer-events: none;

  /* Exact styling from main app tooltip */
  overflow: hidden;
  border-radius: 5px; /* rounded-base */
  border: 2px solid #000; /* border-2 border-border */
  background-color: #e4dfda; /* bg-secondary-background light mode */
  color: #000; /* text-foreground light mode */
  padding: 0.375rem 0.75rem; /* py-1.5 px-3 to match original tooltip */
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-base */
  font-family: "Shuttleblock", system-ui, -apple-system, sans-serif;
  white-space: nowrap;
  line-height: 1; /* Match button line-height */
  height: auto; /* Let content determine height */
  display: inline-flex;
  align-items: center;
  gap: 0.375rem; /* Small gap between text and icon */

  /* Simple fade in animation like the main app */
  animation: simpleFadeIn 150ms ease-out;
}

/* Tooltip icon styling */
.tooltip-icon {
  width: 16px; /* Same as typical navbar icon size */
  height: 16px;
  flex-shrink: 0;
  color: inherit; /* Inherit color from tooltip */
}

/* Dark mode - bg-secondary-background and text-foreground in dark mode */
html[data-theme="dark"] .simple-tooltip {
  background-color: #212121; /* bg-secondary-background dark mode */
  color: #e6e6e6; /* text-foreground dark mode */
}

/* Simple fade animation matching main app behavior */
@keyframes simpleFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Mobile adjustment - keep to the left but limit width */
@media (max-width: 768px) {
  .simple-tooltip {
    max-width: 90vw; /* max-w-[90vw] from mobile styles */
  }
}
